<template>
  <div class="Grid">
    <!-- <TreeFilter></TreeFilter>   -->
    <div class="table-box">
      <div class="headerBar">
        <SelectFilter @getdifPower="getDiffePower"></SelectFilter>
      </div>
      <ProTable :isShowSearch="false" :staffInfoData="staffInfoData" @openDoor="openDoor" @openAddDoor="openAddDoor">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" @click="addStaffData" :icon="CirclePlus">新增员工</el-button>
          <el-button type="primary" :icon="Upload" plain>批量添加员工</el-button>
          <!-- <el-button type="primary" :icon="Download" plain >导出用户数据</el-button> -->
        </template>
      </ProTable>
    </div>
  </div>
  <UserUpload ref="userY" @uploadSuccess="uploadSuccess"></UserUpload>
  <IdenUpload ref="Iden" @succCallback="SuccCallback"></IdenUpload>
</template>

<script setup>
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/Protable/index.vue";
import SelectFilter from "@/components/SelectFilter/index.vue"
import UserUpload from '@/views/staff/components/userUpload.vue'
import IdenUpload from "../components/idenUpload.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, computed, watchEffect, getCurrentInstance, onBeforeUnmount } from "vue"
import { staffData } from "@/stores/staff.js"
import { mainStore } from "@/stores"

let { proxy } = getCurrentInstance()
let mStaff = staffData()
let mStore = mainStore()

// 增加员工的实例
let userY = ref()
// 员工身份设置的实例
let Iden = ref()
// 权限
let power = ref(0)
let take = ref(10)
let current = ref(1)
// 获取员工数据的函数
let getStatffInfo = () => {
  let data = {
    staff_id: mStore.userinfo.identity.staff_id,
    power: power.value,
    current: current.value,
    take: take.value
  }

  // console.log(data,"这是发给后台的数据")
  let res = mStaff.getStaff(data)
  mStaff.getPowerListData()
}


let getDiffePower = (e) => {
  power.value = e
  getStatffInfo()
}

// 上传成功的回调
let uploadSuccess = () => {
  getStatffInfo()
}

// 修改成功的回调
let SuccCallback = () => {
  getStatffInfo()
}

// 添加新员工数据 
let addStaffData = () => {
  userY.value.acceptParams(true)
}

//打开设置员工身份的拉窗  方法是表格中触发的
let openDoor = () => {
  Iden.value.openDoorTrue(true)
}

let openAddDoor = () => {
  userY.value.acceptParams(true)
}

let staffInfoData = computed(() => {
  return mStaff.staffInfo
})

//一页多少数据
let changeSizePage = (size) => {
  take.value = size
  current.value = 1
  getStatffInfo()
}
//当前是第几页
let changeCurrentPage = (cur) => {

  current.value = cur
  getStatffInfo()
}

onMounted(() => {
  getStatffInfo()

  // 监听分页的事件
  proxy.$Bus.on("changeCurrentPage", changeCurrentPage)
  proxy.$Bus.on("changeSizePage", changeSizePage)
})

onBeforeUnmount(() => {
  proxy.$Bus.off("changeCurrentPage", changeCurrentPage)
  proxy.$Bus.off("changeSizePage", changeSizePage)
})
</script>

<style lang="scss" scoped>
.Grid {
  width: 100%;
  display: flex;
  // height: calc(100vh - 142px);

  .table-box {
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 142px);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto 1fr;
    margin-left: 5px;
    .headerBar {}

  }
}
</style>